<template>
    <div class="user">
        <!--导航-->
        <div class="user-header-box">
            <Nav @loginSwitch="loginSwitch"></Nav>
        </div>
        <!-- 登录组件 -->
        <div class="loginImport" v-show="toLogin">
            <Login @loginSwitch="loginSwitch" @passToken="getToken"></Login>
        </div>
        <!--个人主页的主题部分-->
        <main class="user-container user-main-container">
            <div class="user-view">
                <!--主要部分-->
                <div class="user-major">
                    <div class="user-info user-block">
                        <img class="avatar" :src="iconBasicUrl+this.userData.icon" alt="">
                        <div class="user-info-box">
                            <div class="user-top-name">
                                <p class="user-name">{{userData.nick_name}}</p>
                            </div>
                            <div class="user-position">
                                <div class="info-write" title="填写职位信息">
                                    你想从事什么职业
                                </div>
                            </div>
                            <div class="user-intro">
                                <div class="info-write" title="填写个人介绍">
                                    你的信仰是什么
                                </div>
                            </div>
                        </div>
                        <div class="user-action-box">
                            <button v-if="isLogin" class="btn" @click="goProfileOrFollow" :class="[isSelfPage?'setting-btn':'follow-btn',isFollow?'active':'']">{{isSelf}}</button>
                            <button v-else @click="tologin" class="follow-btn btn"><span>关注</span></button>
                        </div>
                    </div>
                    <div class="user-list-block">
                        <div class="user-detail-list" :class="isStickybox?'sticky-box':''">
                            <list-header></list-header>
                            <list-body></list-body>
                        </div>
                    </div>
                </div>
                <!--次要部分-->
                <div class="user-minor">
                    <div class="user-minor-wrap" :class="isDown?'down':''">
                        <div class="user-minor-stat user-block">
                            <div class="stat-title">
                                个人成就
                            </div>
                            <div class="stat-body">
                                <div class="stat-item">
                                    <div class="stat-img">
                                        <i class="iconfont icon-yanjing"></i>
                                    </div>
                                    <span class="stat-txt">文章被阅读 {{this.userData.article_pv}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="user-minor-follow user-block">
                            <router-link :to="{path:`/user/${$route.params.id}/following`}" class="follow-item">
                                <div class="follow-title">关注了</div>
                                <div class="follow-count">{{this.userData.concern}}</div>
                            </router-link>
                            <router-link :to="{path:`/user/${$route.params.id}/followers`}" class="follow-item">
                                <div class="follow-title">关注者</div>
                                <div class="follow-count">{{this.userData.fans}}</div>
                            </router-link>
                        </div>
                        <div class="user-minor-more user-block">
                            <router-link :to="{path:`/user/${$route.params.id}/cposts`}" class="more-item">
                                <div class="more-item-title">
                                    收藏
                                </div>
                                <div class="more-item-count">
                                    {{collectionNum}}
                                </div>
                            </router-link>
                            <!-- <router-link to="/" class="more-item">
                                <div class="more-item-title">
                                    关注标签
                                </div>
                                <div class="more-item-count">
                                    {{}}
                                </div>
                            </router-link> -->
                            <div class="user-join-time more-item">
                                <div class="more-item-title">
                                    加入于
                                </div>
                                <div class="more-item-count">
                                    {{joinTime}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <back-top v-if="isStickybox"></back-top>
    </div>
</template>

<script>
    import ListHeader from "./UserListHeader"
    import ListBody from "./UserListBody"
    import Nav from "@/components/nav.vue"
    import Login from "@/components/login.vue"
    import BackTop from "@/components/backTop.vue"
    export default {
        name: "User",
        created(){
            // console.log(this.$route.path)
            this.eventBus.$on("xxx",()=>{
                console.log(1111111111111111);
                this.getUserData()
            })
            this.eventBus.$on("callUserUpdateFollowToFalse",()=>{
                this.isFollow=false
                this.getUserData()
            })
            this.eventBus.$on("callUserUpdateFollowToTrue",()=>{
                this.isFollow=true
                this.getUserData()
            })
            this.eventBus.$on("followingCallUserUpdate",()=>{
                this.getUserData()
            })
            this.eventBus.$on("followersCallUserUpdate",()=>{
                this.getUserData()
            })
            this.getUserData()
            this.getCollection()
        },
        mounted(){
            window.addEventListener("scroll",this.userScroll,true)
        },
        data() {
            return {
                isStickybox:false,
                isDown:false,
                toLogin:false,
                token: null,
                userData:{},
                iconBasicUrl:"http://api_devss.wanxikeji.cn/",
                //是否是自己的页面
                isSelfPage:false,
                //是否关注过
                isFollow:false,
                //是否登陆过
                isLogin:false,
                collectionNum:0
            }
        },
        methods:{
            async getCollection(){
                let result = await this.axios.post("api/collectionList",{token:this.$store.state.token})
                // console.log(result)
                this.collectionNum = result.data.data.length
            },
            async getFollow(){
                if(!this.isSelfPage){
                    let result = await this.axios.post("api/concernList",{user_id:this.$store.state.userID})
                    let userResult = result.data.data.my_concern.find(item=>item.be_concern_user_id==this.$route.params.id)
                    if(userResult){
                        this.isFollow=true
                    }else{
                        this.isFollow=false
                    }
                }
            },
            getToken(token) {
                this.token = token
            },
            loginSwitch() {
                this.toLogin = !this.toLogin;
            },
            userScroll(){
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                if(scrollTop>246){
                    this.isStickybox=true
                    this.isDown=true

                }else{
                    this.isStickybox=false
                    this.isDown=false
                }
            },
            async getUserData(){
                // this.$router.go(0);
                let result
                let {id} = this.$route.params
                if(this.$store.state.token){//如果为登陆状态
                    // console.log(this.$store.state.token);
                    this.isLogin=true
                    if(this.$store.state.userID==id){//如果跳转用户的id和登陆的id相同 那就用token请求数据
                        // console.log(111);
                        this.isSelfPage=true
                        result = await this.axios.post("/api/userAllInfo",{token:this.$store.state.token})
                    }else{
                        this.isSelfPage=false
                        result = await this.axios.post(`/api/personInfo?user_id=${id}`)
                    }
                }else{//如果不是登陆状态
                    this.isLogin=false
                    result = await this.axios.post(`/api/personInfo?user_id=${id}`)
                }
                // let result = await this.axios.post("/api/personInfo?user_id=462")
                // console.log(result);
                this.userData = result.data.data
                this.getFollow()
                //让关注者和关注的用户刷新 do something ...
            },
            async goProfileOrFollow(){
                if(this.isSelfPage){
                    this.$router.push({path:"/profile"})
                }else{
                    this.getFollow()
                    let result
                    if(this.isFollow){
                        result = await this.axios.post("api/concernDel",{
                            token:this.$store.state.token,
                            be_concern_user_id:this.$route.params.id
                        })
                        this.isFollow=false
                        this.eventBus.$emit("callListHeaderUpdateFollowToFalse")
                    }else{
                        result = await this.axios.post("api/concern",{
                            token:this.$store.state.token,
                            be_concern_user_id:this.$route.params.id
                        })
                        this.isFollow=true
                        this.eventBus.$emit("callListHeaderUpdateFollowToTrue")
                    }
                    console.log(result);
                    this.getUserData()
                    this.eventBus.$emit("callFollowingUpdate")
                }
            },
            tologin(){
                this.toLogin=true
            }
        },
        computed:{
            joinTime(){
                return this.userData.create_time
                // return
            },
            isSelf(){
                if(this.isSelfPage){
                    return "编辑个人资料"
                }else{
                    if(this.isFollow){
                        return "已关注"
                    }else{
                        return "关注"
                    }
                }
            }
        },
        watch:{
            "$route.path":{
                handler(){
                    // console.log(this.$route);
                    // let {id} = this.$route.params
                    this.getUserData()
                },
                deep:true
                // this.getUserData()
            },
            "$store.state":{
                handler(val){
                    if(val.token){
                        this.isLogin=true
                    }else{
                        this.isLogin=false
                    }
                },
                deep:true
            }
        },
        components:{
            ListHeader,
            ListBody,
            Nav,
            Login,
            BackTop
        }
    }
</script>

<style scoped>
    .loginImport {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        z-index: 999;
    }
    .sticky-box{
        padding-top:50px
    }
    .user-block{
        background-color:#fff;
        border-radius:2px;
    }
    .user-header-box{
        position: relative;
        height: 60px;
    }
    .user-header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transition: all .2s;
        background: #fff;
        border-bottom: 1px solid #f1f1f1;
        color: #909090;
        height: 60px;
        z-index: 250;
        transform:translate(0,-100%)
    }
    .user-header.visible{
        transform:translate(0)
    }

    .user-container{
        position: relative;
        margin: 0 auto;
        width: 100%;
        max-width: 960px;
    }
    .user-container .user-view{
        display: flex;
        margin-top:21px
    }
    /*主要部分的上部分*/
    .user-view .user-major{
        flex: 1 1 auto;
    }
    .user-info{
        display: flex;
        padding:30px;
    }
    .avatar{
        position:relative;
        display: inline-block;
        background-size: cover;
        flex: 0 0 auto;
        margin-right: 29px;
        width: 90px;
        height: 90px;
        background-color: #f9f9f9;
        border-radius: 50%;
    }
    .user-info-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        margin-right: 24px;
    }
    .user-top-name{
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .user-top-name .user-name{
        margin: 0;
        font-size: 26px;
        font-weight: 600;
        line-height:36px;
        color: #000;
    }
    .user-action-box{
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .user-action-box .btn{
        margin: 12px 0 0;
        padding: 0;
        height: 34px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        border: 1px solid;
        background-color: #fff;
        border-radius: 4px;
    }
    .user-action-box .btn:hover{
        opacity:.8
    }
    .user-action-box .setting-btn {
        width: 118px;
        color: #3780f7;
    }
    .user-action-box .follow-btn{
        width: 108px;
        color: #6cbd45;
    }
    .user-action-box .follow-btn.active{
        color: #fff;
        background-color: #6cbd45;
        border-color: #6cbd45;
    }
    .info-write{
        color: #4a68ad;
        cursor: pointer;
    }
    .info-write:hover{
        opacity:.8
    }
    .info-write::before{
        content:"+"
    }
    .user-intro{
        margin-top:4.8px
    }
    /*主要部分的下部分*/
    .user-list-block{
        margin-top:12px
    }
    /*次要部分*/
    .user-view .user-minor{
        width:240px;
        /*background-color:#fff;*/
        margin-left:12px
    }
    .user-minor-wrap{
        position:fixed;
        top:81px;
        width:240px;
        transition: all .2s;
    }
    .user-minor-wrap.down{
        top:131px
    }
    /*个人成就*/
    .user-minor-stat{
        margin-bottom:12px;
    }
    .stat-title{
        padding:16px;
        font-size:16px;
        font-weight: 600;
        color: #31445b;
        border-bottom: 1px solid rgba(230,230,231,.5);
    }
    .stat-body{
        padding:16px;
    }
    .stat-body .stat-item{
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #000;
    }
    .stat-img{
        width:20px;
        height:20px;
        background-color:rgb(225,239,255);
        text-align: center;
        line-height:20px;
        color:rgb(123,185,255);
        border-radius:50%;
        padding:2px 2px;
        margin-right:15px;
    }

    /*关注与被关注*/
    .user-minor-follow{
        position: relative;
        display: flex;
        margin-bottom: 12px;
    }
    .user-minor-follow::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 50%;
        background-color: #f3f3f4;
        transform: translate(-50%,-50%);
    }
    .follow-item{
        flex: 1 1 auto;
        padding: 16px 0;
        text-align: center;
        color: #31445b;
    }

    /*更多*/
    .more-item{
        display: flex;
        padding: 15px 5px;
        font-size: 15px;
        color: #000;
        border-top: 1px solid rgba(230,230,231,.5);
    }
    .more-item-title{
        margin-right:auto;
    }
    .user-minor-more{
        background-color: transparent;
    }
</style>